<template>
	<div class="mainRight">
		<el-form
			ref="queryForm"
			:model="queryForm"
			label-width="80px"
			size="small"
		>
			<el-row>
				<el-col :span="8">
					<el-form-item label="组织名称:">
						<el-select
							v-model="queryForm.value"
							placeholder="请选择"
							style="width: 100%"
						>
							<el-option
								v-for="item in options"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="姓名:">
						<el-input
							v-model="queryForm.value"
							placeholder="请输入姓名"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="性别:">
						<el-select
							v-model="queryForm.value"
							placeholder="请选择"
							style="width: 100%"
						>
							<el-option label="全部" value=""> </el-option>
							<el-option label="男" :value="1"> </el-option>
							<el-option label="女" :value="2"> </el-option>
						</el-select> </el-form-item
				></el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="人员类别:">
						<el-select
							v-model="queryForm.value"
							placeholder="请选择"
							style="width: 100%"
						>
							<el-option label="全部" value=""> </el-option>
							<el-option label="预备党员" :value="1"> </el-option>
							<el-option label="正式党员" :value="2"> </el-option>
						</el-select> </el-form-item
				></el-col>
				<el-col :span="8">
					<el-form-item label="手机号:">
						<el-input
							v-model="queryForm.value"
							placeholder="请输入手机号"
						></el-input> </el-form-item
				></el-col>
				<el-col :span="8">
					<el-form-item label="状态:">
						<el-select
							v-model="queryForm.value"
							placeholder="请选择"
							style="width: 100%"
						>
							<el-option
								v-for="item in options"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							>
							</el-option>
						</el-select> </el-form-item
				></el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="备注:">
						<el-input
							v-model="queryForm.value"
							placeholder="请输入备注内容"
						></el-input> </el-form-item
				></el-col>
				<el-col :span="8"></el-col>
				<el-col :span="8"></el-col>
			</el-row>
		</el-form>
		<div class="tableListOperator">
			<div class="leftBtns" style="display: flex">
				<el-button
					type="primary"
					icon="el-icon-plus"
					size="small"
					@click="add"
					>新增</el-button
				>
				<el-upload action style="margin: 0 10px">
					<el-button plain icon="el-icon-upload2" size="small"
						>导入</el-button
					>
				</el-upload>
				<el-button
					plain
					icon="el-icon-download"
					size="small"
					@click="fileExport"
					>导出</el-button
				>
				<el-button
					plain
					icon="el-icon-mobile-phone"
					size="small"
					@click="smsRemind"
					>短信提醒</el-button
				>
				<el-button plain size="small" :disabled="multiple" @click="del"
					>批量删除</el-button
				>
				<el-button plain size="small" @click="unit"
					>党员活动证印制单位</el-button
				>
			</div>
			<div class="rightBtns">
				<el-button plain size="small" @click="resetQuery"
					>重置</el-button
				>
				<el-button type="primary" size="small" @click="search"
					>查询</el-button
				>
			</div>
		</div>
		<el-table
			:data="list"
			style="width: 100%"
			v-loading="loading"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" align="center" width="55" />

			<el-table-column
				prop="unitname"
				label="党组织名称"
				align="center"
				width="150"
				fixed="left"
			/>
			<el-table-column
				label="姓名"
				align="center"
				width="100"
				fixed="left"
			>
				<template slot-scope="{ row }">
					<div
						style="
							display: flex;
							align-items: center;
							justify-content: center;
						"
					>
						<img
							src=""
							alt=""
							style="margin-right: 10px; cursor: pointer"
							@click="toZheng(row)"
						/>
						<span>{{ row.name }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column
				prop="phone"
				label="手机号"
				align="center"
				width="150"
			/>
			<el-table-column
				prop="sex"
				label="性别"
				align="center"
				width="100"
			/>
			<el-table-column
				prop="people"
				label="民族"
				align="center"
				width="100"
			/>
			<el-table-column
				prop="birth"
				label="出生年月"
				align="center"
				width="150"
			/>
			<el-table-column
				prop="edu"
				label="文化程度"
				align="center"
				width="150"
			/>
			<el-table-column
				prop="type"
				label="党员类别"
				align="center"
				width="100"
			/>
			<el-table-column
				prop="jointime"
				label="入党时间"
				align="center"
				width="150"
			/>
			<el-table-column
				prop="confirmationtime"
				label="转正时间"
				align="center"
				width="150"
			/>
			<el-table-column
				prop="status"
				label="状态"
				align="center"
				width="100"
			/>
			<el-table-column
				label="操作"
				align="center"
				fixed="right"
				width="250"
			>
				<template slot-scope="{ row }">
					<el-button type="text" @click="edit(row)">修改</el-button>
					<el-divider direction="vertical"></el-divider>
					<el-button type="text" @click="showMSG(row)"
						>履历</el-button
					>
					<el-divider direction="vertical"></el-divider>
					<el-button type="text" @click="del(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination
			v-show="total > 0"
			:total="total"
			:page.sync="queryForm.pageNum"
			:limit.sync="queryForm.pageSize"
			@pagination="getList"
		/>
		<!-- 活动印制单位 -->
		<el-dialog
			title="党员活动证印制单位"
			:visible.sync="unitVisible"
			width="400px"
		>
			<p>请设置印制单位名称：</p>
			<el-input
				style="margin: 10px 0; width: 70%"
				placeholder="请输入单位名称"
			></el-input>
			<p style="color: #999; font-size: 12px">
				建议：印制单位名称字段长度不要超过10个
			</p>
			<hr />
			<p>说明：</p>
			<div class="cont">
				<img
					src=""
					alt=""
				/>
				<span>您设置的名称会显示在党员活动证封面底部</span>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="unitVisible = false">取 消</el-button>
				<el-button type="primary" @click="unitVisible = false">
					确 定
				</el-button>
			</span>
		</el-dialog>
		<!-- 新增、编辑 -->
		<el-dialog
			:title="form.id ? '更新党员信息' : '新增党员信息'"
			:visible.sync="dialogVisible"
			width="800px"
		>
			<el-form
				:model="form"
				:rules="rules"
				ref="ruleForm"
				label-width="90px"
				label-position="right"
			>
				<h2 style="margin-bottom: 30px">基本信息</h2>
				<el-row :gutter="30">
					<el-col :span="12">
						<el-form-item label="用户名" prop="nickname">
							<el-input v-model="form.nickname"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="姓名" prop="name">
							<el-input v-model="form.name"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="30">
					<el-col :span="12">
						<el-form-item label="手机号" prop="phone">
							<el-input v-model="form.phone"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="身份证" prop="cardID">
							<el-input v-model="form.cardID"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="30">
					<el-col :span="12">
						<el-form-item label="性别" prop="sex">
							<el-select v-model="form.sex" style="width: 100%">
								<el-option value="1" label="男"></el-option>
								<el-option value="2" label="女"></el-option>
							</el-select> </el-form-item
					></el-col>
					<el-col :span="12">
						<el-form-item label="民族" prop="people">
							<el-select
								v-model="form.people"
								style="width: 100%"
							>
								<el-option value="1" label="汉族"></el-option>
								<el-option value="2" label="回族"></el-option>
							</el-select> </el-form-item
					></el-col>
				</el-row>
				<el-row :gutter="30">
					<el-col :span="12"
						><el-form-item label="籍贯" prop="hometown">
							<el-cascader
								size="large"
								clearable
								placeholder="请选择籍贯"
								@change="changeArea"
								:options="pcaTextArr"
								v-model="form.selectedOptions"
								style="width: 100%"
							>
							</el-cascader> </el-form-item
					></el-col>
					<el-col :span="12"
						><el-form-item label="出生日期" prop="birth">
							<el-date-picker
								v-model="form.birth"
								type="date"
								placeholder="选择出生日期"
								style="width: 100%"
							>
							</el-date-picker> </el-form-item
					></el-col>
				</el-row>
				<el-row :gutter="30">
					<el-col :span="12"
						><el-form-item label="学历" prop="edu">
							<el-select v-model="form.edu" style="width: 100%">
								<el-option value="1" label="本科"></el-option>
								<el-option value="2" label="大专"></el-option>
							</el-select> </el-form-item
					></el-col>
					<el-col :span="12"
						><el-form-item label="家庭住址" prop="address">
							<el-input
								v-model="form.address"
							></el-input> </el-form-item
					></el-col>
				</el-row>
				<el-row :gutter="30">
					<el-col :span="12">
						<el-form-item label="工作岗位" prop="worktype">
							<el-select
								v-model="form.worktype"
								style="width: 100%"
							>
								<el-option value="1" label="公务员"></el-option>
								<el-option
									value="2"
									label="专业技术人员"
								></el-option>
							</el-select> </el-form-item
					></el-col>
					<el-col :span="12"
						><el-form-item label="是否退休" prop="retired">
							<el-select
								v-model="form.retired"
								style="width: 100%"
							>
								<el-option value="1" label="是"></el-option>
								<el-option value="2" label="否"></el-option>
							</el-select> </el-form-item
					></el-col>
				</el-row>
				<el-row :gutter="30">
					<el-col :span="12"
						><el-form-item label="排序" prop="sort">
							<el-input v-model="form.sort" /> </el-form-item
					></el-col>
					<el-col :span="12">
						<el-form-item label="状态" prop="status">
							<el-select
								v-model="form.status"
								style="width: 100%"
							>
								<el-option value="1" label="正常"></el-option>
								<el-option value="2" label="异常"></el-option>
							</el-select> </el-form-item
					></el-col>
				</el-row>

				<el-form-item label="照片" prop="pic">
					<el-upload
						class="upload"
						action=""
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload"
					>
						<img
							v-if="form.imageUrl"
							:src="form.imageUrl"
							class="avatar"
						/>
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>

				<h2 style="margin: 30px 0">党员信息</h2>
				<el-row :gutter="30">
					<el-col :span="12"
						><el-form-item label="所属党组织" prop="edu">
							<el-select v-model="form.edu" style="width: 100%">
								<el-option value="1" label="本科"></el-option>
								<el-option
									value="2"
									label="大专"
								></el-option> </el-select></el-form-item
					></el-col>
					<el-col :span="12"
						><el-form-item label="人员类别" prop="address">
							<el-select v-model="form.edu" style="width: 100%">
								<el-option value="1" label="本科"></el-option>
								<el-option value="2" label="大专"></el-option>
							</el-select> </el-form-item
					></el-col>
				</el-row>

				<el-row :gutter="30">
					<el-col :span="12"
						><el-form-item label="入党时间" prop="hometown">
							<el-date-picker
								v-model="form.birth"
								type="date"
								placeholder="选择出生日期"
								style="width: 100%"
							>
							</el-date-picker> </el-form-item
					></el-col>
					<el-col :span="12"
						><el-form-item label="转正时间" prop="birth">
							<el-date-picker
								v-model="form.birth"
								type="date"
								placeholder="选择出生日期"
								style="width: 100%"
							>
							</el-date-picker> </el-form-item
					></el-col>
				</el-row>
				<el-row :gutter="30">
					<el-col :span="12"
						><el-form-item label="党籍状态" prop="sort"
							><el-select
								v-model="form.status"
								style="width: 100%"
							>
								<el-option value="1" label="正常"></el-option>
								<el-option value="2" label="异常"></el-option>
							</el-select> </el-form-item
					></el-col>
					<el-col :span="12">
						<el-form-item label="工作单位" prop="status">
							<el-input v-model="form.sort" /> </el-form-item
					></el-col>
				</el-row>
				<el-row :gutter="30">
					<el-col :span="12"
						><el-form-item label="是否失联" prop="sort"
							><el-select
								v-model="form.status"
								style="width: 100%"
							>
								<el-option value="1" label="正常"></el-option>
								<el-option value="2" label="异常"></el-option>
							</el-select> </el-form-item
					></el-col>
					<el-col :span="12">
						<el-form-item label="备注" prop="status">
							<el-input v-model="form.sort" /> </el-form-item
					></el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false"
					>确 定</el-button
				>
			</span>
		</el-dialog>
		<!-- 履历 -->
		<el-dialog title="履历" :visible.sync="msgVisible">
			<editor :min-height="192" />
			<span slot="footer" class="dialog-footer">
				<el-button @click="msgVisible = false">取 消</el-button>
				<el-button type="primary" @click="msgVisible = false"
					>确 定</el-button
				>
			</span>
		</el-dialog>
	</div>
</template>

<script>
// import { } from "@/api/card/home";
import {
	provinceAndCityData,
	pcTextArr,
	regionData,
	pcaTextArr,
	codeToText,
} from 'element-china-area-data'
export default {
	data() {
		return {
			loading: false,
			dialogVisible: false,
			multiple: true,
			queryForm: {
				pageNum: 1,
				pageSize: 10,
			},
			total: 0,
			list: [],
			form: {},
			ids: [],
			rules: {
				name: [
					{
						required: true,
						message: '请输入活动名称',
						trigger: 'blur',
					},
				],
			},
			regionData,
			pcaTextArr,
			options: [],
			msgVisible: false,
			unitVisible: false,
		}
	},
	methods: {
		submit() {},
		getList() {
			this.loading = true
			setTimeout(() => {
				this.list = [
					{
						id: 1,
						unitname: '中共***市组织部党委',
						name: '张三',
						phone: '13333333333',
						sex: '男',
						people: '汉族',
						birth: '1980-01-01',
						edu: '大专',
						type: '正式党员',
						jointime: '2020-01-01',
						confirmationtime: '2021-01-01',
						status: '',
					},
				]
				this.total = 1
				this.loading = false
			}, 300)
		},
		add() {
			this.dialogVisible = true
		},
		edit(row) {
			this.form = row
			this.dialogVisible = true
		},
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id)
			this.multiple = !selection.length
		},
		fileExport() {},
		smsRemind() {},
		del(row) {
			const ids = row.id || this.ids
			this.$modal.confirm('是否确定删除这些数据？').then(() => {
				console.log(ids)
			})
		},
		unit() {
			this.unitVisible = true
		},
		resetQuery() {
			this.queryForm = {
				pageNum: 1,
				pageSize: 10,
			}
			this.resetForm('queryForm')
			this.getList()
		},
		search() {
			this.getList()
		},
		showMSG(row) {
			this.msgVisible = true
		},
		handleAvatarSuccess() {},
		beforeAvatarUpload() {},
		changeArea() {},
		toZheng(row) {
			this.$router.push('huodongzheng')
		},
	},
	created() {
		this.getList()
	},
}
</script>

<style lang="scss" scoped>
.upload {
	width: 150px;
	height: 150px;
	border: dashed 1px #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	&:hover {
		border-color: #409eff;
	}
	.avatar-uploader-icon {
		width: 150px;
		height: 150px;
		font-size: 24px;
		text-align: center;
		line-height: 150px;
	}
	.avatar {
		width: 150px;
		height: 150px;
		display: block;
	}
}
hr {
	margin: 15px 0;
}
.cont {
	display: flex;
	align-items: flex-end;
	span {
		display: inline-block;
		width: 40%;
		font-size: 12px;
		color: #999;
	}
}
</style>
